<template>
  <div class="sendMessages mod-config">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item>
            <el-button size="small" type="primary" @click="exportBtn()">导出</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="dayin2()">打印</el-button>
          </el-form-item>

          <el-form-item>
            <el-radio-group @change="getDataList()" v-model="dataForm.selDateAdd" size="small">
              <!-- <el-radio-button label="全部"></el-radio-button> -->
              <el-radio-button label="0">今日</el-radio-button>
              <el-radio-button label="1">昨日</el-radio-button>
              <el-radio-button label="2">本周</el-radio-button>
              <el-radio-button label="3">其他</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="dataForm.selDateAdd == '3'">
            <el-date-picker size="small" @change="getDataList()" v-model="dataForm.startDate" format="yyyy-MM-dd HH:mm:ss"
              type="datetime" placeholder="开始日期"></el-date-picker>
            <el-date-picker size="small" @change="getDataList()" v-model="dataForm.endDate" format="yyyy-MM-dd HH:mm:ss"
              type="datetime" placeholder="结束日期"></el-date-picker>
          </el-form-item>


          <el-popover placement="top" width="160" v-model="visible">
            <div style=" margin: 0">
              <!-- <template v-for="(item,key) in selectedColumn" >
                    <el-checkbox v-model="columns[key]" :key="key">{{key}}</el-checkbox>
                </template> -->
              <el-checkbox-group v-model="column" @change="columnChange">
                <el-checkbox v-for="(item,index) in columns" :label="index" :key="index"> {{index}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <el-button slot="reference" size="small" style="margin-top: 2px;float: right;">选择列</el-button>
          </el-popover>

        </el-form>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-input v-model="dataForm.externalno" placeholder="关键字" clearable></el-input>
          </el-form-item>
          <!--  <el-form-item>
          <el-input v-model="dataForm.fjh" placeholder="房间号" clearable></el-input>
         </el-form-item>
         <el-form-item>
           <el-input v-model="dataForm.fjlx" placeholder="房间类型" clearable></el-input>
         </el-form-item>
         <el-form-item>
           <el-input v-model="dataForm.xm" placeholder="姓名" clearable></el-input>
         </el-form-item>
         <el-form-item>
           <el-input v-model="dataForm.dh" placeholder="电话" clearable></el-input>
         </el-form-item> -->

          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-form>



        <el-table :data="dataList" border show-summary :summary-method="tableSum" ref="table" id="dataList" v-loading="dataListLoading"
          @selection-change="selectionChangeHandle" style="width: 100%;">
          <!-- <el-table-column type="selection" header-align="center" align="center" width="100"></el-table-column> -->

          <el-table-column prop="roomNum" v-if="selectedColumn['房间号']!=undefined" header-align="center" sortable
            align="center" label="房间号">
          </el-table-column>

          <el-table-column prop="name" v-if="selectedColumn['姓名']!=undefined" header-align="center" sortable align="center"
            label="姓名">
          </el-table-column>

          <el-table-column prop="newRoomPrice" v-if="selectedColumn['原收款']!=undefined" header-align="center" sortable align="center"
            label="原收款">
          </el-table-column>

          <el-table-column prop="payment" v-if="selectedColumn['续交收款']!=undefined" sortable header-align="center"
            align="center" label="续交收款">
          </el-table-column>

          <el-table-column prop="oldTime" v-if="selectedColumn['原预离日期']!=undefined" header-align="center" sortable
            align="center" label="原预离日期">
          </el-table-column>

          <el-table-column prop="newTime" v-if="selectedColumn['新预离日期']!=undefined" header-align="center" sortable align="center"
            label="新预离日期">
          </el-table-column>

          <el-table-column prop="creatTime" v-if="selectedColumn['操作时间']!=undefined" header-align="center" sortable align="center"
            label="操作时间">
          </el-table-column>

          <el-table-column prop="userName" v-if="selectedColumn['操作员']!=undefined" header-align="center" sortable
            align="center" label="操作员">
          </el-table-column>

        </el-table>

        <iframe id="print-iframe" style="display: none;"></iframe>

        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        dataForm: {
          key: '',
          externalno: '',
          startDate: '',
          endDate: '',
          type: null,
          state: null,
          selDateAdd: '0'
        },
        column: [
          '房间号',
          '姓名',
          '原收款',
          '续交收款',
          '原预离日期',
          '新预离日期',
          '操作时间',
          '操作员'
        ],
        selectedColumn: {
          '房间号': true,
          '姓名': true,
          '原收款': true,
          '续交收款': true,
          '原预离日期': true,
          '新预离日期': true,
          '操作时间': true,
          '操作员': true
        },
        columns: {
          '房间号': true,
          '姓名': true,
          '原收款': true,
          '续交收款': true,
          '原预离日期': true,
          '新预离日期': true,
          '操作时间': true,
          '操作员': true
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        visible: false,
        shaixuan: false,
        sellerIds: [],
        platformSeller: [],
        tableHeader: [
          {
            name: '房间号',
            field: 'roomNum'
          },
          {
            name: '姓名',
            field: 'name'
          },
          {
            name: '原收款',
            field: 'newRoomPrice'
          },
          {
            name: '续交收款',
            field: 'payment'
          },
          {
            name: '原预离日期',
            field: 'oldTime'
          },
          {
            name: '新预离日期',
            field: 'newTime'
          },
          {
            name: '操作时间',
            field: 'creatTime'
          },
          {
            name: '操作员',
            field: 'userName'
          }
        ],
      // 合计:原收款
      sumysk: 0,
      // 合计:续交收款
      sumxjsk: 0
      };
    },
    components: {},
    activated() {
      this.getDataList();
    },
    methods: {
      gettime(time) {

        var year = time.getFullYear(); //获取完整的年份(4位,1970-????)
        var month = time.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var day = time.getDate(); //获取当前日(1-31)
        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }
        var h = time.getHours(); // 获取当前小时数(0-23)
        var s = time.getMinutes(); // 获取当前分钟数(0-59)
        var a = time.getSeconds();
        if (h < 10) {
          h = "0" + h;
        }
        if (s < 10) {
          s = "0" + s;
        }
        if (a < 10) {
          a = "0" + a;
        }

        var dateString = year + "-" + month + "-" + day + "  " + h + ":" + s + ":" + a;
        return dateString;
      },
      tableSum(param) {

        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }

          if (column.label == '原收款') {
            sums[index] = 0
            sums[index] = this.sumysk
          }

          if (column.label == '续交收款') {
            sums[index] = 0
            sums[index] = this.sumxjsk;
          }
        })

        return sums;
      },

      columnChange() {

        this.selectedColumn = {}
        this.column.forEach(item => {
          this.selectedColumn[item] = true
        })
      },
      dayin2() {

        var number = 0;
        for (var i = 0; i < this.tableHeader.length; i++) {
          if (this.selectedColumn[this.tableHeader[i].name]) {
            number += 1;
          }
        }

        var style = [
          '<style>',
          'body{font-size: 12px; color: #666;}',
          'table{width: 100%; border-collapse: collapse; border-spacing: 0;border-bottom:1px solid #ccc;}',
          'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc;  text-align: right; font-size: 12px; color: #666;}',
          'a{color: #666; text-decoration:none;}',
          '*.layui-hide{display: none}',
          '</style>'
        ].join('');
        //头部html
        var table =
          '<table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%;"><thead class="has-gutter"><tr class="">';
        table +=
          '<th style="text-align:center; width:100%; line-height:38px;font-size:20px;font-weight:bold;" colspan="' +
          number + '" >房间续住统计报表</th>';

        table += '</tr><tr class="">';
        this.tableHeader.forEach((item, index) => {
          if (this.selectedColumn[item.name]) {
            table +=
              '<th colspan="1" rowspan="1" class="el-table_1_column_2  is-center is-leaf"><div class="cell">' +
              item.name + '</div></th>';
          }
        });
        table += '</tr></thead><tbody>';
        //身体
        this.dataList.forEach((item, index) => {
          table += '<tr class="">';
          if (this.selectedColumn["房间号"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.roomNum + '</span></div>' + '</td>';
          }
          if (this.selectedColumn["姓名"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.name + '</span></div>' + '</td>';
          }
          if (this.selectedColumn["原收款"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.newRoomPrice + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["续交收款"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.payment + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["原预离日期"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.oldTime + '</span></div>' + '</td>';
          }
          if (this.selectedColumn["新预离日期"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.newTime + '</span></div>' + '</td>';
          }
          if (this.selectedColumn["操作时间"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.creatTime + '</span></div>' + '</td>';
          }
          if (this.selectedColumn["操作员"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.userName + '</span></div>' + '</td>';
          }

          table += '</tr>';

          console.log(item);
        });

  table += '<tr class="">';
        if (this.selectedColumn["房间号"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span></span></div>' + '</td>';
        }
        if (this.selectedColumn["姓名"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span></span></div>' + '</td>';
        }
        if (this.selectedColumn["原收款"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span>' + this.sumysk + '</span></div>' + '</td>';
        }
        if (this.selectedColumn["续交收款"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span>' + this.sumxjsk + '</span></div>' + '</td>';
        }
        if (this.selectedColumn["原预离日期"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span></span></div>' + '</td>';
        }
        if (this.selectedColumn["新预离日期"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span></span></div>' + '</td>';
        }
        if (this.selectedColumn["操作时间"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span></span></div>' + '</td>';
        }
        if (this.selectedColumn["操作员"]) {
          table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
            '<span></span></div>' + '</td>';
        }

        table += '</tr>';

        table += '</tbody></table>';
        table +=
          '<div style="width: 100%;text-align: right;">' +
          '<span style="margin-right: 20px;">打印时间：' +
          this.moment(new Date()) +
          '</span>' +
          '<span>打印人：' +
          this.$store.state.user.name +
          '</span>' +
          '</div>';

        var iframe = document.getElementById('print-iframe');
        var doc = null;
        document.body.appendChild(iframe);
        doc = iframe.contentWindow.document;
        doc.write(style + table);
        doc.close();
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf('MSIE') > 0) {
          document.body.removeChild(iframe);
        }
      },
      selectSeller(id, value) {
        this.getDataList();
        this.getExecuteUserId();
      },
      //exportBtn导出
      exportBtn() {
        // this.$http({
        //   url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinpeople/excel_export'),
        //   method: 'get',
        //   params: this.$http.adornParams({
        //     ...this.dataForm
        //   })
        // })
        // var data = JSON.stringify({...this.dataForm})
        window.open(this.$http.adornUrl(`/hotel/thotelfloorroomcontinuedrecord/continue_export`));

      },
      moment(date) {
        return moment(date).format('YYYY-MM-DD');
      },

      // 获取数据列表
      getDataList() {
        if (this.dataForm.startDate != null && this.dataForm.startDate != "") {
          if (this.dataForm.startDate instanceof Date) {
            this.dataForm.startDate = this.gettime(this.dataForm.startDate);
          }

        }
        if (this.dataForm.endDate != null && this.dataForm.endDate != "") {
          if (this.dataForm.endDate instanceof Date) {
            this.dataForm.endDate = this.gettime(this.dataForm.endDate);
          }

        }
        this.dataListLoading = true;
        var ids = '';
        if (this.sellerIds) {
          this.sellerIds.forEach((item, index) => {
            ids += item + ',';
          });
          ids = ids.substring(0, ids.length - 1);
        }
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelfloorroomcontinuedrecord/continueLive'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            ...this.dataForm
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {

            this.pageIndex = data.page.page.currPage
            this.dataList = data.page.page.list;
            this.totalPage = data.page.page.totalPage;
            this.pageSize = data.page.page.pageSize
            this.sumysk = data.page.sumysk
            this.sumxjsk = data.page.sumxjsk
          } else {
            this.dataList = [];
            this.totalPage = 0;
            this.sumysk = 0;
            this.sumxjsk = 0;
          }
          this.dataListLoading = false;
          console.log("关闭了加载");
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },
      // 删除
      revoke(id) {
        this.$confirm(`确定进行撤销操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/hotel/hotelscore/revoke/${id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      }
    }
  };
</script>

<style>
  .memberreport {
    margin-bottom: 18px;
  }

  .memberreport .memberlistreport .memberreportsmbox {
    padding-left: 20px;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .memberreport .memberlistreport .center-footer-box .details {
    display: block;
    width: 38px;
    height: 20px;
    line-height: 19px;
    background-color: #07c9de;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 5px;
    transition: 0.35s;
  }

  .fr {
    float: right;
  }

  a {
    text-decoration: none;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .amountcolor6 {
    color: #ff5400;
  }

  .memberreport .memberlistreport .membernumber {
    font-size: 34px;
  }

  .memberreport .memberlistreport .mumberunit {
    font-size: 18px;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box p {
    margin: 0;
    padding-right: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .memberreport .memberlistreport .center-footer-box .nembercolor {
    color: #ff5400;
    padding-left: 3px;
    padding-right: 3px;
  }

  .memberreport .memberlistreport .center-footer-box .details {
    display: block;
    width: 38px;
    height: 20px;
    line-height: 19px;
    background-color: #07c9de;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 5px;
    transition: 0.35s;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .fl {
    float: left;
  }

  .colorff {
    color: #f00;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box .paright {
    padding-right: 0;
  }

  .memberreport .memberlistreport .center-footer-box p {
    margin: 0;
    padding-right: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .memberreport .memberlistreport .center-footer-box .nembercolor {
    color: #ff5400;
    padding-left: 3px;
    padding-right: 3px;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .memberreport .memberlistreport .center-top-box {
    height: 90px;
    width: 100%;
  }

  .memberreport .memberlistreport .center-top-box li {
    width: 100%;
    height: 30px;
    overflow: hidden;
    margin: 0;
  }

  .memberreport .memberlistreport .top-list {
    height: 30px;
    line-height: 30px;
  }

  .memberreport .memberlistreport .membertopname {
    display: block;
  }

  .memberreport .memberlistreport .center-top-box li .membertopmoney {
    height: 30px;
  }

  .memberreport .memberlistreport .center-top-box li .money {
    font-size: 20px;
    color: #ff5400;
  }

/*  .el-checkbox.el-checkbox {
    margin-left: 30px;
  } */
</style>
